<template>
	<view class="notice">
		<xbd-pages-content title="公告通知">
			<template #content>
				<view class="content" v-if="code!=='40040'">
					<view class="headline">
						{{info.notice_title}}
					</view>
					<view class="date">
						{{info.updated_at | timeFormat('YYYY-MM-DD HH:mm') }}
					</view>
					<parser :html="info.notice_content[0]" :tagStyle='style'/>
				</view>
				<view v-else class="cencal">
					<image class="image" src="../../static/images/msg_cencal.png" mode=""></image>
				</view>
			</template>
		</xbd-pages-content>
	</view>

</template>

<script>
	import parser from '@/components/jyf-parser/jyf-parser.vue';
	import { Message } from '@/api/index.js';
	export default {
		data() {
			return {
				style: {
				    'img': 'display:block;margin: 0 auto;max-width:670rpx;height:auto; transform: translateX(0);',
				},
				id: '',
				code:'',
				info:{}
			};
		},
		components: {
			parser
		},
		methods: {
			// 初始化数据
			async init(id) {
				try {
					this.$showLoading('加载中');
					const res = await Message.getMessageDetail(id);
					console.log(res)
					this.code = res.code
					this.info = res.data.detail
					uni.hideLoading();
				} catch(e) {
					console.log(e);
				}
			},
	
		},
		async onLoad(res) {
			console.log(res)
			this.id = res.id;
			await this.init(res.id);
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .interlayer{
		word-break: break-all;
	}
	::v-deep ._ul-bef{
		margin: 0;
	}
	.cencal{
		padding: 1px 0;
		width: 750rpx;
		.image{
			display: block;
			margin: 200rpx auto;
			width: 460rpx;
			height: 460rpx;
		}
	}
	.content{
		max-width: 750rpx;
		padding: 10px 40rpx;
		.headline{
			width: 680rpx;
			word-break: break-all;
			font-size: 32rpx;
			color: #394954;
		}
			
		.date{
			width: 680rpx;
			word-wrap: break-word;
			margin-top: 15px;
			font-size: 24rpx;
			color: #999999;
			margin-bottom: 20px;
		}
	}
</style>
